<template>
  <div class="title-tips" :style="{ '--theme': $store.getters.themeColor }">
    {{ name }}
  </div>
</template>
<script>
export default {
  name: 'customTitle',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
$theme: var(--theme);
.title-tips {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #303133;
  line-height: 16px;
  //border-left: 4px solid $theme;
  //padding-left: 3px;
  // margin: 12px 0px;
  margin-bottom: 6px;
  line-height: 24px;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: block;
    height: 16px;
    width: 3px;
    background: $theme;
    border-radius: 1px;
    margin-right: 6px;
  }
}
</style>
